<template>
	<div id="search">
		<div id="head">
			<div class="input">
				<div id="sea">
					<input type="text" placeholder="搜索" v-model="inputValue" @keyup.enter="toSearch" />
					<button type="button" v-model="inputValue" @click="toSearch"><i class="el-icon-search
"></i>搜索</button>
				</div>


			</div>
		</div>

	</div>
</template>

<script>
	export default {
		name: 'Search',
		data() {
			return {
				inputValue: ''
			}
		},
		methods: {
			toSearch() {

				if (this.inputValue == '') {
					this.$message({
						message: '请输入内容哦！',
						type: 'warning'
					});
				} else {
					this.$router.push('/result?q='+this.inputValue)
				}
			}
		}
	}
</script>

<style scoped="scoped">
	#head {
		height: 60px;
		background-color: floralwhite;
	}

	#search input {
		width: 200px;
		height: 20px;
	}

	#sea input {
		float: left;
	}

	#sea button {
		color: blueviolet;
	}

	#sea {
		float: right;
		margin-right: 600px;
	}

	.btn {
		margin-bottom: 0;
		margin-left: 300px;
	}

	#head .input {
		padding-top: 20px;
	}
</style>
